<template>
	<view class="wrap">
		<view class="header">
			<view class="header-inner">
				<view class="back-png" @click="backPage">
					<image class="header-image" src="@/static/images/arrow-left.svg" mode="aspectFill"></image>
				</view>
				<view class="title">
					报表信息
				</view>
				<view></view>
			</view>
		</view>

		<view class="report-list" v-if="reportList.length>0">
			<view :class="['report-item']" v-for="item  in reportList" :key="item.id" @click="viewreport(item)">
				<view class="left-circle">
					<image  src="@/static/images/report.svg" mode="aspectFill">
				</view>
				<view class="main-context">
					<view class="title">
						{{item.title}}
					</view>
				</view>
			</view>
		</view>
		
		<view  style="margin-top: 150rpx" v-else>
			<no-Data></no-Data>
		</view>

	</view>
</template>

<script>
	import {
		getToken
	} from '@/utils/auth';
	import storage from "@/utils/storage.js"
	import environment from '@/environment'

	export default {
		data() {
			return {
				checkSignList: [],
				reportList: [
					{
						id: 1,
						title: "需求台账报表",
						link:"rpt/demandReport"
					},
					{
						id: 2,
						title: "采购合同台账报表",
						link:"rpt/purchaseReport"
					},
					{
						id: 3,
						title: "发票一览表",
						link:"rpt/invoiceReport"
					},
					{
						id: 4,
						title: "采购合同付款台账报表",
						link:"rpt/paymentReport"
					},
					{
						id: 5,
						title: "产品信息一览表",
						link:"rpt/productInfoReport"
					},
					{
						id: 6,
						title: "催交台账表",
						link:"rpt/expedReport"
					},
					{
						id: 7,
						title: "监造台账报表",
						link:"rpt/supervisionReport"
					},
					{
						id: 8,
						title: "国内检验台账报表",
						link:"rpt/domesticInspectionReport"
					},
					{
						id: 9,
						title: "追溯号和报关料号对照表",
						link:"rpt/traceCustomsReport"
					},
					{
						id: 10,
						title: "预估一级箱单汇总表",
						link:"rpt/packingListReport"
					},
					{
						id: 11,
						title: "物流月度计划台账报表",
						link:"rpt/logisticsMonthlyPlanLedgerReport"
					},
					{
						id: 12,
						title: "船期报表",
						link:"rpt/scheduleReport"
					},
					{
						id: 13,
						title: "船次费用报表",
						link:"rpt/shipCostManagementReport"
					},
					{
						id: 14,
						title: "供应商物资送港预报表",
						link:"rpt/supplierMaterialsDeliveredReport"
					},
					{
						id: 15,
						title: "在港物资一览表",
						link:"rpt/goodsInPortReport"
					},
					{
						id: 16,
						title: "国内检验追溯报表",
						link:"rpt/domesticTrackReport"
					},
					{
						id: 17,
						title: "项目合同进度追踪报表",
						link:"rpt/projectScheduleReport"
					}
				]
			}
		},
		computed: {
			token() {
				return this.$store.state.user.token || ''
			}
		},
		methods: {
			backPage() {
				uni.navigateBack({
					delta: 1
				});
			},
			viewreport(item) {
				
				// let url = '/static/webview/scm/report.html'
				// this.$tab.navigateTo(`/pages/common/webview/index?title=内置web&url=${url}&progress=no`);
				
				// let url = encodeURIComponent(
				// 	`http://10.0.4.58/wormhole?token=${getToken()}&to=/scm/demandBookTab?onlyContent='true'`);
				// this.$tab.navigateTo(`/pages/common/webview/index?title=报表分析&url=${url}`);
				
				
				if(!item.link || !item.title){
					return false;
				}
				let currentEnv = storage.get("env")
				 let domain = environment[currentEnv]['domain']
				// 10.0.21.36:8080
				let url = encodeURIComponent(`${domain}/mobile/${item.link}?title=${item.title}&token=${this.token}`)
				  console.log('linkurl',`${domain}/mobile/${item.link}?title=${item.title}&token=${this.token}`)
				this.$tab.navigateTo(`/pages/common/webview/index?title=SCM报表&url=${url}&progress=no`);
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		width: 100%;
		height: calc(100vh);
		padding-top: 135px;
		overflow-y: scroll;
		background: var(--additional-colors-white, #FFF);
	}

	.header {
		width: 100%;
		height: 135px;
		flex-shrink: 0;
		border-radius: 0px 0px 30px 30px;
		background: #3461FD;
		position: fixed;
		top: 0;
		z-index: 999;
		padding-top: 60px;

		.header-inner {
			display: flex;
			justify-content: space-between;
			padding: 0 25px;

			.title {
				color: #FFF;
				text-align: center;
				font-size: 18px;
				font-family: PingFang SC;
				font-style: normal;
				font-weight: 800;
				line-height: 26px;
				letter-spacing: 0.09px;
			}

			.back-png,
			.scan-png {
				width: 24px;
				height: 24px;
				border-radius: 12px;
				text-align: center;
				line-height: 24px;

				.header-image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}


	.report-list {
		padding: 20px 15px;
		margin-bottom: 60px;

		.report-item {
			width: 100%;
			height: 81px;
			flex-shrink: 0;
			border-radius: 16px;
			background: #FFF;
			box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.08);
			margin-bottom: 15px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 20px;
			box-sizing: border-box;
			border: 1px solid transparent;

			.left-circle {
				width: 28px;
				height: 28px;
				// border-radius: 14px;
				// background: #EB5757;
				flex-shrink: 0;
				margin-right: 15px;
				image{
					width: 100%;
					height: 100%;
				}
			}

			.main-context {
				flex: 1;

				.title {
					color: #120B3C;
					font-size: 14px;
					font-family: PingFang SC;
					font-style: normal;
					font-weight: 400;
					line-height: normal;
					letter-spacing: 0.333px;
				}

				.code {
					color: #9895AB;
					font-size: 11.093px;
					font-family: PingFang SC;
					font-style: normal;
					font-weight: 400;
					line-height: 17.749px;
					letter-spacing: 0.333px;
				}

				.time {
					color: #9895AB;
					font-size: 11.093px;
					font-family: PingFang SC;
					font-style: normal;
					font-weight: 400;
					line-height: 17.749px;
					letter-spacing: 0.333px;
				}
			}

		}

	}
</style>